import React from 'react';
import PropTypes from 'prop-types';
import {Spin, Card, Button, Row, Col, Form, Checkbox, Table} from 'antd';
import {FORM_OPTIONS, FORM_ROW_OPTIONS, TABLE, ROWSELECTION_FIXED_COLUMN_WIDTH} from '../constants';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import routes from './routes';
import {injectIntl} from './intl';
import styles from './style.css';
import {getDetailDeliver} from './api';
import {formatAmount, formatPercent} from '../utils';

const FormItem = Form.Item;
const {Description} = DescriptionList;

export class DetailPanel extends React.PureComponent {
    state = {
        loading: false,
        data: {},
        keys: []
    }

    componentDidMount() {
        if(this.props.id)
            this.getDetailInfo();
    }

    componentWillUnmount() {
        this.isunmount = true;
    }

    getDetailInfo = () => {
        const id = this.props.id;
        const keys = [];
        this.setState({
            loading: true,
        });
        getDetailDeliver(id)
            .then(res => {
                if(res.ok) {
                    const partInvoice = res.data.partInvoices.find(v => v.isDefault === true);
                    const key = partInvoice ? keys.push(partInvoice.partInvoiceId) : keys;
                    this.setState({
                        loading: false,
                        data: res.data,
                        keys
                    });
                } else this.setState({
                    loading: false
                });
            });
    }
    render() {
        const {data} = this.state;
        const {formatMessage} = this.props.intl;
        const columns = [{
            title: formatMessage({
                id: 'detailPanel.column.partInvoiceCode',
                defaultMessage: '箱单发票号'
            }),
            dataIndex: 'partInvoiceCode',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.itemCount',
                defaultMessage: '备件品种数'
            }),
            dataIndex: 'itemCount',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.totalAmount',
                defaultMessage: '备件总金额'
            }),
            dataIndex: 'totalAmount',
            render: text => formatAmount(text)
        }, {
            title: formatMessage({
                id: 'detailPanel.text.varietyMeetRate',
                defaultMessage: '累计品种满足率'
            }),
            dataIndex: 'varietyMeetFullRate',
            render: text => formatPercent(text)
        }, {
            title: formatMessage({
                id: 'detailPanel.column.amountMeetFullRate',
                defaultMessage: '累计金额满足率'
            }),
            dataIndex: 'amountMeetFullRate',
            render: text => formatPercent(text)
        }, {
            title: formatMessage({
                id: 'detailPanel.column.quantityMeetFullRate',
                defaultMessage: '累计数量满足率'
            }),
            dataIndex: 'quantityMeetFullRate',
            render: text => formatPercent(text)
        }, {
            title: formatMessage({
                id: 'detailPanel.column.shipmentDay',
                defaultMessage: '发运天数'
            }),
            dataIndex: 'shipmentDay'
        }];
        const rowSelection = {
            type: 'radio',
            fixed: true,
            columnWidth: ROWSELECTION_FIXED_COLUMN_WIDTH,
            selectedRowKeys: this.state.keys,
        };
        return (
            <Spin spinning={this.state.loading} className="detail">
                <Card title={formatMessage({
                    id: 'detailPanel.column.partInvoices',
                    defaultMessage: '结算发票清单'
                })}>
                    <Table
                        className="white-space-nowrap"
                        columns={columns}
                        rowKey="partInvoiceId"
                        pagination={false}
                        dataSource={data.partInvoices}
                        rowSelection={rowSelection}
                        {...TABLE} />
                </Card>
                <Card title={formatMessage({
                    id: 'detailPanel.column.amountMeetFullRateCommon',
                    defaultMessage: '满足率信息'
                })}>
                    <Form>
                        <Row>
                            <Col {...FORM_OPTIONS.col}>
                                <FormItem className={styles.multiLabel} label={formatMessage({
                                    id: 'detailPanel.operation.amountMeetFullRate',
                                    defaultMessage: '累计金额满足率'
                                })} {...FORM_OPTIONS.item}>
                                    <Description>{formatPercent(data.amountMeetFullRate)}</Description>
                                </FormItem>
                            </Col>
                            <Col {...FORM_OPTIONS.col}>
                                <FormItem label={formatMessage({
                                    id: 'detailPanel.operation.fullRateAbnormal',
                                    defaultMessage: '异常'
                                })} {...FORM_OPTIONS.item}>
                                    <Checkbox
                                        disabled={true}
                                        checked={data.fullRateAbnormal}
                                        name="fullRateAbnormal">
                                    </Checkbox>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row className="row-margin">
                            <Col>
                                <FormItem className={styles.multiLabel}
                                    label={formatMessage({
                                        id: 'detailPanel.form.noRateReason',
                                        defaultMessage: '未达到满足率原因'
                                    })}{...FORM_ROW_OPTIONS.item}>
                                    {data.noRateReason}
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Card>
                <Card title={formatMessage({
                    id: 'detailPanel.column.info',
                    defaultMessage: '及时性信息'
                })}>
                    <Form>
                        <Row>
                            <Col {...FORM_OPTIONS.col}>
                                <FormItem label={formatMessage({
                                    id: 'detailPanel.operation.deliveryAbnormal',
                                    defaultMessage: '异常'
                                })} {...FORM_OPTIONS.item}>
                                    <Checkbox
                                        disabled={true}
                                        checked={data.deliveryAbnormal}
                                        name="deliveryAbnormal">
                                    </Checkbox>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row className="row-margin">
                            <Col>
                                <FormItem
                                    label={formatMessage({
                                        id: 'detailPanel.form.noTimeSubjectiveReason',
                                        defaultMessage: '主观原因'
                                    })}{...FORM_ROW_OPTIONS.item}>
                                    {data.noTimeSubjectiveReason}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row className="row-margin">
                            <Col>
                                <FormItem
                                    label={formatMessage({
                                        id: 'detailPanel.form.noTimeObjectiveReason',
                                        defaultMessage: '客观原因'
                                    })}{...FORM_ROW_OPTIONS.item}>
                                    {data.noTimeObjectiveReason}
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Card>
                <div className="page-toolbar">
                    <Button
                        type="primary"
                        disabled={this.state.loading}
                        onClick={this.props.onCancel}>{formatMessage({
                            id: 'detailPanel.text.return',
                            defaultMessage: '返回'
                        })}</Button>
                </div>
            </Spin>
        );
    }
}

DetailPanel.propTypes = {
    id: PropTypes.string.isRequired,
    onCancel: PropTypes.func.isRequired,
    history: PropTypes.object,
    intl: PropTypes.object
};

import {connect} from 'react-redux';

const mapDispatchToProps = (dispatch, props) => ({
    onCancel: () => {
        props.history.push(routes.query.url());
    },
});
export default connect(null, mapDispatchToProps)(injectIntl(DetailPanel));
